<template>
  <div id="role-management" class="container">
    <table-filter>
      <el-input
        placeholder="请输入角色名称"
        clearable
        @clear="dtb.$data.filteredList = null"
        v-model="searchVal"
      >
      </el-input>
      <el-button
        plain
        type="warning"
        @click="dtb.search({ rolename: searchVal })"
        >查询</el-button
      >
    </table-filter>
    <el-row>
      <el-button plain type="primary" @click="showEaDialog = true"
        >添加角色</el-button
      >
    </el-row>
    <data-table ref="dtb" :api-setting="apiSetting">
      <el-table-column fixed prop="roleid" label="RoldId" width="70" />
      <el-table-column prop="rolecode" label="角色编码" width="110" />
      <el-table-column prop="rolename" label="角色名称" width="120" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="countUser" label="用户数量" width="80" />
      <el-table-column label="更新时间" width="170" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.updatedate | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column prop="updateperson" label="更新人" width="80" />
      <el-table-column label="创建时间" width="170" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.createtime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column prop="createperson" label="创建人" width="80" />
      <el-table-column fixed="right" label="操作" width="190">
        <template slot-scope="{ row }">
          <el-button @click="editRoleMenu(row)" type="text" size="small"
            >编辑角色菜单</el-button
          >
          <el-button class="warning" @click="edit(row)" type="text" size="small"
            >编辑
          </el-button>
          <el-button
            @click="delRow(`/sys/manage/deleteRole/${row.roleid}`, '角色')"
            type="text"
            size="small"
            class="danger"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </data-table>
    <ea-role
      ref="eaDialog"
      :show.sync="showEaDialog"
      @on-reload="dtb.loadData()"
    >
    </ea-role>
    <edit-role-menu
      ref="editRoleMenu"
      :show.sync="showEditRoleMenu"
    ></edit-role-menu>
  </div>
</template>

<script>
import EditRoleMenu from "./components/EditRoleMenu";
import menu from "@/mixins/business/menu";
import dtb from "@/mixins/refs/dtb";
import eaDialog from "@/mixins/refs/eaDialog";
import EaRole from "./components/EaRole";
import deleteRow from "@/mixins/dataTable/deleteRow";

export default {
  name: "Role",
  components: { EaRole, EditRoleMenu },
  mixins: [deleteRow, menu, dtb, eaDialog],
  data() {
    return {
      searchVal: "",
      showEditRoleMenu: false,
      apiSetting: {
        method: "get",
        url: "/sys/manage/getRoleList"
      }
    };
  },
  methods: {
    editRoleMenu(row) {
      this.showEditRoleMenu = true;
      this.$refs.editRoleMenu.$data.roleid = row.roleid;
    },
    edit(row) {
      this.axios.get(`/sys/manage/getRoleById/${row.roleid}`).then(res => {
        this.showEaDialog = true;
        this.eaDialog.setEditData({
          singleData: res
        });
      });
    }
  }
};
</script>

<style scoped></style>
